<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>护照验证</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Helvetica;
            color: #333333;
            height: auto;
        }

        button {
            outline: none;
            border: none;
            background: #fff;
            color: #F2B40A;
        }

        .checkmessage {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            padding-left: 0.24rem;
            box-sizing: border-box;
        }

        .downChoose {
            width: 0.24rem;
            height: 0.13rem;
            position: absolute;
            top: 0.45rem;
            right: 0.2rem;
        }

        .checkmessage div {
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
            box-sizing: border-box;
            padding-bottom: 0.1rem;
        }

        .checkmessage div:first-of-type {
            border-top: 1px solid #e5e5e5;
        }

        .checkmessage input {
            outline: none;
            border: none;
            display: inline-block;
            width: 100%;
            height: 0.92rem;
            box-sizing: border-box;
            font-size: 0.26rem;
        }

        .nextbutton {
            width: 6.88rem;
            height: 0.9rem;
            text-align: center;
            line-height: 0.9rem;
            background-color: #ffd203;
            outline: none;
            border: none;
            border-radius: 0.1rem;
            margin-top: 0.8rem;
            margin-left: calc((100% - 6.88rem) / 2);
            font-size: 0.28rem;
        }

        #copyText {
            width: 1.4rem;
            height: 0.4rem;
            background: rgba(255, 210, 3, 1);
            border-radius: 0.04rem;
            font-size: 0.18rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            line-height: 0.4rem;
            padding: 0;
        }
    </style>
</head>

<body>
    <div class="chooseItem"
        style="padding-right: 0; width: 100%;height: 1.2rem;padding: 0 0.5rem 0 0.24rem;box-sizing: border-box;display: flex;display: -webkit-flex;justify-content: space-between;align-items: center;border-top: 0.2rem solid #f7f7f7;position: relative;">
        <select name="outland" id="chooseOutLand"
            style="border: none;background: transparent;display: flex;outline: none;align-items: center;-webkit-appearance: none;vertical-align: top;height: 0.36rem;min-width: 100%;padding-left: 0;appearance: none;-moz-appearance: none;-webkit-appearance: none;background: url(../../image/xialax.png) no-repeat scroll right center;padding-right: 0.28rem;background-size: 0.2rem;background-position-x: 96%;font-size: 0.28rem;">
            <option value="">选择您的证件类型</option>
            <option value="passport">护照</option>
            <option value="otherport">台胞证</option>
        </select>
    </div>
    <div class="checkmessage">
        <div>
            <input type="text" name="" id="engName" placeholder="请输入您的英文全名" />
        </div>
        <div
            style="display: flex;display:-webkit-flex;justify-content: space-between;padding-right: 0.24rem;box-sizing: border-box;align-items: center;">
            <input type="text" name="" id="userName" placeholder="请输入您的提现银行卡开户名" style="flex: 1;" /> 
            <!-- <button  id="copyText" data-copyText="">复用英文全名</button> -->
        </div>
        <div>
            <input type="text" name="" id="userNumber" placeholder="请输入证件号码，认证后不能修改" maxlength="30" />
        </div>
    </div>
    <button class="nextbutton" style="color:#262626;">下一步</button>

    <script src="../../script/autosize.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var goAddMoney;
            if (api.pageParam.goAddMoney != undefined && api.pageParam.goAddMoney) {
                goAddMoney = api.pageParam.goAddMoney;
            }
            $(".nextbutton").on("click", function () {
                if (!$("#engName").val()) {
                    app.toast("英文姓名不能为空");
                    return;
                }
                if ($("#userName").val() == "") {
                    app.toast("姓名不能为空");
                    return;
                }
                if ($("#userNumber").val() == "") {
                    app.toast("证件号码不能为空");
                    return;
                }
                var chooseCerfertion = $("#chooseOutLand option:selected").val();
                if (chooseCerfertion == "") {
                    app.toast("请选择你的证件类型");
                    return
                }
                var cointypecontract = {
                    name: "uploadpicture",
                    subpage: "my/uploadpicture",
                    title: "上传证件",
                    param: {
                        pageName: "uploadpicture",
                        userName: $("#userName").val().trim(),
                        userCardNumber: $("#userNumber").val().trim(),
                        goAddMoney: goAddMoney,
                        type: chooseCerfertion,
                        engName: $("#engName").val().trim()
                    }
                }
                app.setNavBarAttr(cointypecontract);
            });
            $("#copyText").click(function () {
                if (!$("#engName").val()) {
                    app.toast("请输入您的姓名英文全名");
                    return;
                }
                $("#userName").val($("#engName").val().trim());
                // if (app.clipboard) {
                //     var text = $("#copyText").attr("data-copyText");
                //     if (text) {
                //         app.clipboard.set({
                //             value: text
                //         }, function (ret, err) {
                //             app.log("copy", ret);
                //             if (ret.status) {
                //                 app.toast("复制成功");
                //             } else {
                //                 app.toast("复制失败");
                //             }
                //         });
                //     } else {
                //         app.toast("复制不能为空");
                //     }
                // }
            })
            app.listen("auth_commit_success", function () {
                app.closeW();
            });
            app.listen("goMain", function () {
                app.closeW();
            })
            app.headerMap();
        };
    </script>
</body>

</html>